<template>
  <FullscreenCard class="wrapper">
    <h3>定时器</h3>
    <div>
      <div>值：{{ state.val }}</div>
      <div>
        <el-button type="primary" @click="onStart">开始</el-button>
        <el-button @click="onStop">停止</el-button>
      </div>
    </div>
  </FullscreenCard>
</template>

<script lang="ts" setup>
import { onBeforeRouteLeave } from 'vue-router'
import FullscreenCard from '@/components/FullscreenCard'

const intervalTime = ref<any>(null)
const	state	=	reactive({
  val: 0,
})
const onStart = () => {
  state.val++
  console.log('val:', state.val)
  clearTimeout(intervalTime.value)
  intervalTime.value = setTimeout(() => {
    onStart()
  }, 1000)
}
const onStop = () => {
  clearTimeout(intervalTime.value)
}
onMounted(() => {
  onStart() 
})
onBeforeRouteLeave(() => {
  onStop()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
</style>
